<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .card{
            width: 275px;
            height: 154px;
            
            margin: 0 auto;
        }
        .card img{
           width: 275px;
           height: 105px;
           border-radius: 6px;
       }
       .card .title{
           
           height: 20px;
           font-size: 14px;
           line-height: 20px;
           color: #333;
           margin-top: 8px;
           font-weight: bolder;
       }
        .card .time{
            
            height: 16.8px;
            font-size: 12px;
            line-height: 17px;
            color: #999;
            margin-top: 4px;
            
        }
        .card .time img{
            width: 17px;
            height: 17px;
            vertical-align: -4px;
        }
    </style>
</head>
<body>
    <div class="card">
        <a href="">    
            <img src="https://bufanweb3.oss-cn-beijing.aliyuncs.com/webdev/20200119150205.jpg" alt="">
        </a>
        <p class="title">怎么在vue脚手架中解决跨域</p>
        <p class="time">
            <span><img src="http://www.bufanui.com/pages/front/img/talk-icon.png" alt=""></span>
            2021年05月06日</p>
    </div>
</body>
</html>